<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>贵阳市初中教辅材料调查</title>
    <link rel="shortcut icon" href="/static/images/book_navigation/favicon.ico">
    <link rel="stylesheet" href="/static/assets/layui-v2.5.6/css/layui.css">
    <link rel="stylesheet" href="/static/css/book_navigation/book_navigation.css">
</head>
<body>
<div class="DT_header">
</div>
<div class="layui-fluid DT_main">
    <div class="layui-row window-width">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <form class="layui-form layui-form-pane" action="">
                <fieldset>
                    <legend>基本信息</legend>
                    <div class="layui-form-item">
                        <label class="layui-form-label must">所在区县</label>
                        <div class="layui-input-block">
                            <select id="county_id" name="county_id" lay-filter="county_id">

                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label must">学校</label>
                        <div class="layui-input-block">
                            <select id="school_id" name="school_id">

                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label must">年级</label>
                        <div class="layui-input-block">
                            <select id="grade" name="grade">
                                <option value="">请选择</option>
                                <option value="七年级">七年级</option>
                                <option value="八年级">八年级</option>
                                <option value="九年级">九年级</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label must">班级</label>
                        <div class="layui-input-block" id="classes" name="classes">

                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label must">学科</label>
                        <div class="layui-input-block">
                            <select id="subject_name" name="subject_name">
                                <option value="">请选择</option>
                                <option>语文</option>
                                <option>数学</option>
                                <option>英语</option>
                                <option>物理</option>
                                <option>化学</option>
                                <option>道德与法治</option>
                                <option>历史</option>
                                <option>地理</option>
                                <option>生物</option>
                            </select>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="book-info">
                    <legend>所用教辅材料信息</legend>
                    <div class="layui-form-item">
                        <label class="layui-form-label must">图书名称</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input book-name"
                                   autocomplete="off"/>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label must">图书来源</label>
                        <div class="layui-input-block">
                            <select id="buy_road" class="buy-road" lay-filter="buy_road">
                                <option value="">请选择</option>
                                <option value="学校统一订购">学校统一订购</option>
                                <option value="任课教师推荐">任课教师推荐</option>
                                <option value="学生自行购买">任课教师自选</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item layui-hide otherBuyRoad">
                        <label class="layui-form-label">其他渠道</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input buy_road2"
                                   autocomplete="off" placeholder="请填写其他渠道（非必填）"/>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label must">使用学生数</label>
                        <div class="layui-input-block">
                            <input type="number" class="layui-input student_use_num"
                                   autocomplete="off"/>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">封面图片</label>
                        <div class="layui-input-block">
                            <div class="imgPreview">
                            </div>
                            <div class="prompt3">
                                <div class="layui-btn layui-btn-normal">
                                    点击上传
                                </div>
                                <input type="file" class="filepath file fileOne" onchange="changepic(this)"
                                       accept="image/*">
                            </div>
                            <label onclick="demoShow(1)" class='pic_demo'>查看示例</label>
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">编目图片</label>
                        <div class="layui-input-block">
                            <div class="imgPreview">

                            </div>
                            <div class="prompt3">
                                <div class="layui-btn layui-btn-normal">
                                    点击上传
                                </div>
                                <input type="file" class="filepath file fileTwo" onchange="changepic(this)"
                                       accept="image/*">
                            </div>
                            <label onclick="demoShow(2)" class='pic_demo'>查看示例</label>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label must">您对该图书质量的评价</label>
                        <div class="layui-input-block">
                            <select class="evaluate">
                                <option value="">请选择</option>
                                <option value="0">很好</option>
                                <option value="1">较好</option>
                                <option value="2">一般</option>
                                <option value="3">较差</option>
                                <option value="4">很差</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label must">下学期您是否会继续使用该版本图书？</label>
                        <div class="layui-input-block">
                            <select class="keep">
                                <option value="">请选择</option>
                                <option value="0">会</option>
                                <option value="1">不会</option>
                            </select>
                        </div>
                    </div>
                </fieldset>
                <div class="layui-form-item add-more">
                    <button type="button" class="layui-btn layui-btn-normal add-one">再添一本</button>
                </div>
                <div class="layui-form-item add-more">
                    <button type="button" class="layui-btn layui-btn-normal commit-info" onclick="commit_info(this)">
                        提交
                    </button>
                </div>

                <div class="layui-form-item add-more">
                    <p>技术支持:贵州京师城投智慧教育产业股份有限公司</p>
                    <p>网站备案号∶京ICP备14031436号-9</p>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" src="/static/assets/jquery/jquery-3.5.1.js"></script>
<script type="text/javascript" src="/static/assets/layui-v2.5.6/layui.js"></script>
<script type="text/javascript">
    var resource = "${resource}";
    var multiSelect;
    loadRem();
    layui.extend({
        selectN: '/static/assets/layui-extends/selectN',
        selectM: '/static/assets/layui-extends/selectM'
    }).use(['form', 'selectN', 'selectM'], function () {
        var form = layui.form;
        var selectM = layui.selectM;
        //获取所有区县
        selectRender("county_id", resource + "api/jfInformation/getArea2", {});

        form.on('select(county_id)', function (data) {
            var v = data.value;
            if (v) {
                selectRender("school_id", resource + "api/jfInformation/getSchoolByAreaCode2?sys_code=" + v, {sys_code: v});
            }
        });

        classesVal(30);

        /**
         *@description 点击购买渠道下拉框
         *@author XieXing
         *@date 2021/1/23 11:19
         */
        form.on('select(buy_road)', function (data) {
            var v = data.value;
            var next = $(data.elem).parent().parent().next();
            if (v == "其他") {
                $(next).removeClass("layui-hide");
            } else {
                $(next).val("");
                $(next).addClass("layui-hide");
            }
            form.render();
        });


        /**
         *@description 班级赋值
         *@author XieXing
         *@date 2021/1/23 13:00
         */
        function classesVal(classesNum) {
            var data = [];
            for (var i = 1; i <= classesNum; i++) {
                var obj = {};
                obj.id = i;
                obj.name = i + "班";
                data.push(obj);
            }
            multiSelect = selectM({
                //元素容器【必填】
                elem: '#classes'
                //候选数据【必填】
                , data: data
                //默认值
                , selected: []
                //最多选中个数，默认5
                , max: data.length
                //input的name 不设置与选择器相同(去#.)
                , name: 'roles'
                //值的分隔符
                , delimiter: ','
                //候选项数据的键名
                , field: {idName: 'id', titleName: 'name'}
            });
            form.render();
        }


        /**
         *@description 下拉框渲染
         *@author XieXing
         *@date 2021/1/23 10:49
         */
        function selectRender(selectId, url, params) {
            $.ajax({
                type: "GET",        //jsonp跨域请求只能是get请求
                //async: true,       //jsonp跨域请求只能是异步请求
                // contentType:'application/x-javascript;charset=utf-8',
                url: url,
                dataType: "jsonp",
                contentType: "application/jsonp;charset=utf-8",
                jsonp: 'jsoncallback',
                success: function (data) {
                    var data = data.data;
                    var str = "<option value=''>请选择</option>";
                    for (var i = 0; i < data.length; i++) {
                        str += "<option value='" + data[i].code + "'>" + data[i].name + "</option>";
                    }
                    $("#" + selectId).html(str);
                    form.render();
                },
                error: function (data) {
                    alert("跨域出错！");
                }
            })
        }

        numVerify();

        /**
         *@description 使用学生数验证
         *@author XieXing
         *@date 2021/1/26 9:49
         */

        function numVerify() {
            $(".student_use_num").keyup(function () {
                var num = $(this).val();
                if (num == "") {
                    return false;
                }
                reg = /^[1-9]\d*$/;
                if (!reg.test(num)) {
                    layer.alert("请输入有效学生使用数量", {icon: 2});
                    $(this).val("");
                    return false;
                }
            });
        }


        /**
         *@description 再添一本
         *@author XieXing
         *@date 2021/1/25 14:03
         */
        $(".add-one").click(function () {
            var str = "<div>\n" +
                "<div class=\"layui-form-item\">\n" +
                "                        <label class=\"layui-form-label must\">图书名称</label>\n" +
                "                        <div class=\"layui-input-block\">\n" +
                "                            <input type=\"text\" class=\"layui-input book-name\"\n" +
                "                                   autocomplete=\"off\"/>\n" +
                "                        </div>\n" +
                "                    </div>\n" +
                "                    <div class=\"layui-form-item\">\n" +
                "                        <label class=\"layui-form-label must\">图书来源</label>\n" +
                "                        <div class=\"layui-input-block\">\n" +
                "                            <select id=\"buy_road\" class=\"buy-road\" lay-filter=\"buy_road\">\n" +
                "                                <option value=\"\">请选择</option>\n" +
                "                                <option value=\"学校统一订购\">学校统一订购</option>\n" +
                "                                <option value=\"任课教师推荐\">任课教师推荐</option>\n" +
                "                                <option value=\"学生自行购买\">任课教师自选</option>\n" +
                "                                <option value=\"其他\">其他</option>\n" +
                "                            </select>\n" +
                "                        </div>\n" +
                "                    </div>\n" +
                "                    <div class=\"layui-form-item layui-hide otherBuyRoad\">\n" +
                "                        <label class=\"layui-form-label\">其他渠道</label>\n" +
                "                        <div class=\"layui-input-block\">\n" +
                "                            <input type=\"text\" class=\"layui-input buy_road2\"\n" +
                "                                   autocomplete=\"off\" placeholder=\"请填写其他渠道（非必填）\"/>\n" +
                "                        </div>\n" +
                "                    </div>\n" +
                "\n" + "<div class=\"layui-form-item layui-form-text\">\n" +
                "                        <label class=\"layui-form-label must\">使用学生数</label>\n" +
                "                        <div class=\"layui-input-block\">\n" +
                "                            <input type=\"number\" class=\"layui-input student_use_num\"\n" +
                "                                   autocomplete=\"off\"/>\n" +
                "                        </div>\n" +
                "                    </div>" +
                "                    <div class=\"layui-form-item layui-form-text\">\n" +
                "                        <label class=\"layui-form-label\">封面图片</label>\n" +
                "                        <div class=\"layui-input-block\">\n" +
                "                            <div class=\"imgPreview\">\n" +
                "                            </div>\n" +
                "                            <div class=\"prompt3\">\n" +
                "                                <div class=\"layui-btn layui-btn-normal\">\n" +
                "                                    点击上传\n" +
                "                                </div>\n" +
                "                                <input type=\"file\" class=\"filepath file fileOne\" onchange=\"changepic(this)\"\n" +
                "                                       accept=\"image/*\">\n" +
                "                            </div>\n" +
                "                            <label onclick=\"demoShow(1)\" class='pic_demo'>查看示例</label>\n" +
                "                        </div>\n" +
                "                    </div>\n" +
                "\n" +
                "                    <div class=\"layui-form-item layui-form-text\">\n" +
                "                        <label class=\"layui-form-label\">编目图片</label>\n" +
                "                        <div class=\"layui-input-block\">\n" +
                "                            <div class=\"imgPreview\">\n" +
                "\n" +
                "                            </div>\n" +
                "                            <div class=\"prompt3\">\n" +
                "                                <div class=\"layui-btn layui-btn-normal\">\n" +
                "                                    点击上传\n" +
                "                                </div>\n" +
                "                                <input type=\"file\" class=\"filepath file fileTwo\" onchange=\"changepic(this)\"\n" +
                "                                       accept=\"image/*\">\n" +
                "                            </div>\n" +
                "                            <label onclick=\"demoShow(2)\" class='pic_demo'>查看示例</label>\n" +
                "                        </div>\n" +
                "                    </div>\n" +
                "                    <div class=\"layui-form-item layui-form-text\">\n" +
                "                        <label class=\"layui-form-label must\">您对该图书质量的评价</label>\n" +
                "                        <div class=\"layui-input-block\">\n" +
                "                            <select class=\"evaluate\">\n" +
                "                                <option value=\"\">请选择</option>\n" +
                "                                <option value=\"0\">很好</option>\n" +
                "                                <option value=\"1\">较好</option>\n" +
                "                                <option value=\"2\">一般</option>\n" +
                "                                <option value=\"3\">较差</option>\n" +
                "                                <option value=\"4\">很差</option>\n" +
                "                            </select>\n" +
                "                        </div>\n" +
                "                    </div>\n" +
                "                    <div class=\"layui-form-item layui-form-text\">\n" +
                "                        <label class=\"layui-form-label must\">下学期您是否会继续使用该版本图书？</label>\n" +
                "                        <div class=\"layui-input-block\">\n" +
                "                            <select class=\"keep\">\n" +
                "                                <option value=\"\">请选择</option>\n" +
                "                                <option value=\"0\">会</option>\n" +
                "                                <option value=\"1\">不会</option>\n" +
                "                            </select>\n" +
                "                        </div>\n" +
                "                    </div>"
                + "                        <div class=\"layui-form-item del-container\">\n" +
                "                            <button type=\"button\" class=\"remove-btn layui-btn layui-btn-danger layui-icon layui-icon-delete \" onclick='deleteSelf(this)'>删除</button>\n" +
                "                        </div>\n" +
                "                    </div>";

            //定义添加的学生使用数量
            numVerify();
            $(".book-info").append(str);
            form.render();
        });

    });


    /**
     *@description 上传图片
     *@author XieXing
     *@date 2021/1/23 9:43
     */
    function changepic(e) {
        delFile(e);
        var reads = new FileReader();
        f = e.files[0];
        savePic(f, e);
        reads.readAsDataURL(f);
        reads.onload = function (e1) {
            var y = document.createElement('img');
            $(y).addClass("img3");
            y.src = this.result;
            $(e).parent().prev().append(y);
        };
    }


    /**
     *@description 删除图片
     *@author XieXing
     *@date 2021/1/23 18:34
     */
    function delFile(e) {
        $(e).parent().parent().find("img").remove();
        var path = $(e).attr("pathVal");
        if (!path) {
            return false;
        }
        /**
         *@description 删除照片
         *@author XieXing
         *@date 2021/1/23 18:36
         */
        $.post(resource + "api/jfInformation/delFile", {path: path}, function (data) {
            if (data.ok) {
                console.log("删除成功");
            } else {
                console.log("网络异常");
            }
        })

    }

    function savePic(file, e) {
        var formData = new FormData();
        formData.append('file', file);
        $.ajax({
            url: resource + "api/jfInformation/upload",
            type: "post",
            data: formData,
            contentType: false,
            processData: false,
            success: function (data) {
                $(e).attr("pathVal", data.fileRoot);
            },
            error: function (data) {
                alert("上传失败");
            }
        });
    }

    function clearpic(e) {
        $(e).parent().parent();
        // var x = document.getElementsByClassName('imgPreview');
        var count = x.childElementCount;
        for (var i = 1; i < count; i++) {
            x.removeChild(x.children[1]);
        }
    }

    /**
     *@description 提交调查
     *@author XieXing
     *@date 2021/1/23 11:41
     */
    function commit_info(that) {
        var county_id = $("#county_id").val();//区县id
        if (!county_id) {
            layer.msg("请选择所在区县", {icon: 2});
            return false;
        }
        var county_name = $("#county_id option:selected").text();//区县名称
        var school_id = $("#school_id").val();//学校id
        if (!school_id) {
            layer.msg("请选择所在学校", {icon: 2});
            return false;
        }
        var school_name = $("#school_id option:selected").text();//学校名称

        var grade = $("#grade").val();//年级
        if (!grade) {
            layer.msg("请选择年级", {icon: 2});
            return false;
        }
        var classes = multiSelect.values.join(",");//班级
        if (!classes) {
            layer.msg("请选择班级", {icon: 2});
            return false;
        }
        var subject_name = $("#subject_name").val();
        if (!subject_name) {
            layer.msg("请选择学科", {icon: 2});
            return false;
        }
        var pics = bookInfo();
        if (!pics.isOk) {
            layer.alert(pics.msg, {icon: 2});
            return false;
        } else {
            pics = pics.dataArr;
        }
        //封装参数
        var params = {
            county_id: county_id,
            county_name: county_name,
            school_id: school_id,
            school_name: school_name,
            grade: grade,
            classes: classes,
            subject_name: subject_name,
            picArray: pics
        };

        layer.confirm("确认提交吗？", function () {
            $.post(resource + "api/jfInformation/saveJfInfo", params, function (result) {
                if (result.result == "提交成功！") {
                    $(".add-more").hide();
                    $(".del-container").hide();
                    $(that).hide();
                    layer.alert("提交成功，感谢参与调研！");
                } else {
                    layer.msg(result.result);
                }
            })
        });

    }


    /**
     *@description 教材数据
     *@author XieXing
     *@date 2021/1/23 16:34
     */
    function bookInfo() {
        var res = {
            isOk: true,
            msg: "数据返回成功"
        };

        var bookNames = $(".book-name");//教材名称
        var buyRodes = $(".buy-road");//购买渠道
        var fileOne = $(".fileOne");//教材正面图片
        var fileTwo = $(".fileTwo");//教材侧面图片
        var otherRoad = $(".buy_road2");//其他渠道
        var evaluates = $(".evaluate");//评价
        var studentUseNum = $(".student_use_num");//学生使用数量
        var keeps = $(".keep");//是否会再次使用

        var dataArr = [];
        for (var i = 0; i < bookNames.length; i++) {
            var obj = {};
            obj.materials_name = $(bookNames[i]).val();
            if (!obj.materials_name) {
                res.isOk = false;
                res.msg = "请填写第" + (i + 1) + "本图书名称";
                return res;
            }
            var other = $(otherRoad[i]).val();//其他渠道
            if (other) {
                obj.buyRoads = other;
            } else {
                obj.buyRoads = $(buyRodes[i]).val();
            }
            if (!obj.buyRoads) {
                res.isOk = false;
                res.msg = "请选择第" + (i + 1) + "本图书来源";
                return res;
            }
            obj.student_use_num = $(studentUseNum[i]).val();
            if (!obj.student_use_num) {
                res.isOk = false;
                res.msg = "请选择第" + (i + 1) + "本图书的学生使用数";
                return res;
            }
            obj.pathUrl1 = $(fileOne[i]).attr("pathVal");
            obj.pathUrl2 = $(fileTwo[i]).attr("pathVal");

            obj.evaluate = $(evaluates[i]).val();
            if (obj.evaluate == "") {
                res.isOk = false;
                res.msg = "请选择对第" + (i + 1) + "本图书的评价";
                return res;
            }
            obj.keep = $(keeps[i]).val();
            if (obj.keep == "") {
                res.isOk = false;
                res.msg = "请选择第" + (i + 1) + "本图书是否继续使用";
                return res;
            }
            dataArr.push(obj);
        }
        res.dataArr = JSON.stringify(dataArr);
        return res;
    }

    /**
     *@description 样例展示
     *@author XieXing
     *@date 2021/1/23 17:27
     */
    function demoShow(type) {
        var title = "";
        var imgPath = "";
        if (type == 1) {
            title = "教辅正面照片示例";
            imgPath = "demo_img_one.png";
        } else {
            title = "图书编目信息页示例";
            imgPath = "demo_img_two.png";
        }
        layer.msg("<img class='demo_show' style='width: 200px;' src='/static/images/book_navigation/" + imgPath + "' alt = '图片不存在' > "
        )
    }


    function deleteSelf(e) {
        layer.confirm("确认删除吗？", function () {
            var first = $(e).parent().parent();
            first.remove();
            layer.closeAll();
        });
    }

    /**
     *@description 点击触发文件上传
     *@author XieXing
     *@date 2021/1/25 22:45
     */
    function uploadImg(that) {
        $("#testOne").click();
    }


    /**
     *@description 加载Rem
     *@author XieXing
     *@date 2021/1/25 11:02
     */
    function loadRem() {
        var width = $(window).width();
        if (width < 1366) {
            setRem();
            window.addEventListener('orientation' in window ? "deviceorientation" : "resize", setRem);

            function setRem() {
                var html = document.documentElement;
                var hWidth = html.getBoundingClientRect().width;
                html.style.fontSize = hWidth / 15 + "px";
            }
        }

    }

</script>

</body>
</html>